<template>
    <div>
        <!-- basicTable 基础表格 -->
        <MerakeEditTable></MerakeEditTable>

        <!-- 页面代码 源码 -->
        <dropWrap key="oreo">
            <pre><code class="language-js">{{ htm }} </code></pre>
        </dropWrap>
    </div>
</template>
<script lang="ts" setup>
    import MerakeEditTable from "@/components/MerakEditTable/indexTable.vue";
    import { ref, reactive, defineProps, onMounted, computed, nextTick } from 'vue';
    import dropWrap from "../../dropWrap.vue";
    
    let htm = ref < string > (`
    引入组件
            import basicTableSum from "@/components/MerakEditTable/components/basicTable/moreEdit.vue";
            
            <div style="height: 400px;display: flex; flex-direction: column;">
                    <basicTableSum v-bind="tableConfig" @changeSelection="changeCheck" @editFormFun="editFormClick">
                        <template #field值="{scoped}">//支持solt，根据field值
                        </template>
                        <template  #handle="{ row }">//操作列handle     
                        </template>
                    </basicTableSum>
                </div>
        //默认支持可编辑类型 // input  date select
        //editFormFun  编辑之后事件返回当前编辑行
        //changeCheck  checkbox选中事件
        1）const tableConfig = reactive({
                headData: tableHeadData,//表格头部数据   必须值
                tableData: tableData,//表格内容数据      必须值
                headConfig: headConfig,//可编辑列类型    必须值 
                selection: false,//是否显示checkbox   
                editStatus:false,//开启虚拟加载
           })


            tableHeadData=[{
                title: "属性值(中文)",
                field: 'title_zh',
                fixed :"left"//左侧固定列
                width:'200px' //可设置每列宽度
                }]

            // 'tableHeadData.field':类型(input\date)
            headConfig={ 
               
                title_zh: "input",
                title_ru:{
                    type:"select", 
                    options:options
                }
            }

            // 'tableHeadData.field':{value:默认值,label:展示值}
            tableData=[{
                title_zh: {
                label: "",
                value: "",
                errTip:""
            }}]
  `);
  onMounted(() => {
        nextTick(() => {
            Prism.highlightAll();
        });
        })
</script>